<template>
  <div>
    <div id="bar" style="width: 512px; height: 380px" />
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "EchartOrder",
  data() {
    return {};
  },
  components: {},
  methods: {
    Echart() {
      let myChart = echarts.init(document.getElementById("bar"));
      let option = {
        title: {
          text: "采购额趋势",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        toolbox: {
          feature: {
            //dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            //restore: { show: true },
            //saveAsImage: { show: true },
          },
        },
        xAxis: [
          {
            type: "category",
            data: [
              "Jan",
              "Feb",
              "Mar",
              "Apr",
              "May",
              "Jun",
              "Jul",
              "Aug",
              "Sep",
              "Oct",
              "Nov",
              "Dec",
            ],
            axisPointer: {
              type: "shadow",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            min: 0,
            max: 50,
            interval: 5,
            axisLabel: {
              formatter: "{value}",
            },
          },
        ],
        series: [
          {
            name: this.$data,
            type: "bar",
            tooltip: {
              valueFormatter: function (value) {
                return value;
              },
            },
            data: [35, 20, 36, 10, 10, 20, 30, 20, 45, 24, 35, 23],
            itemStyle: {
              color: "#60dc35",
            },
          },
        ],
      };
      myChart.setOption(option);
    },
  },
  mounted() {
    this.Echart();
  },
};
</script>

<style lang="less" scoped></style>
